<template>
  <hips-view content-frozen>
    <hips-nav-bar
      slot="header"
      title="IndexList 索引列表"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <hips-index-list
      ref="indexList"
      :data="sourceData"
      title="City Choose"
      @title-click="titleClick"
      @select="select"
    />
    <!-- :options="scrollOption"
      @pulling-down="onPullingDown"
      @pulling-up="onPullingUp"  -->
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { IndexList } from '@hips/vue-ui';

export default {
  components: {
    [IndexList.name]: IndexList,
  },
  mixins: [ BasicView ],
  data() {
    return {
      scrollOption: {
        pullDownRefresh: {
          threshold: 60, // 触发 pullingDown 的距离
          stop: 40, // pullingDown 正在刷新 hold 时的距离
          txt: '刷新成功',
        },
        pullUpLoad: {
          txt: {
            more: '上拉加载更多',
            noMore: '没有更多数据',
          },
        },
      },
      sourceData: [
        {
          name: 'A',
          items: [
            {
              name: 'ANQING',
              value: 3,
            },
            {
              name: 'ANDA',
              value: 4,
            },
          ],
        },
        {
          name: 'B',
          items: [
            {
              name: 'BEIJING',
              value: 1,
            },
            {
              name: 'BAYINGUOLENGZHOU',
              value: 5,
            },
            {
              name: 'BOERTALAZHOU',
              value: 6,
            },
          ],
        },
        {
          name: 'C',
          items: [
            {
              name: 'CHENGDU',
              value: 7,
            },
          ],
        },
        {
          name: 'E',
          items: [
            {
              name: 'EERDUOSI',
              value: 8,
            },
            {
              name: 'EZHOU',
              value: 9,
            },
            {
              name: 'ENSHIZHOU',
              value: 10,
            },
          ],
        },
        {
          name: 'F',
          items: [
            {
              name: 'FUZHOU',
              value: 11,
            },
            {
              name: 'FOSHAN',
              value: 12,
            },
            {
              name: 'FANGCHENGGANG',
              value: 13,
            },
          ],
        },
        {
          name: 'G',
          items: [
            {
              name: 'GUANGZHOU',
              value: 14,
            },
            {
              name: 'GUIYANG',
              value: 15,
            },
          ],
        },
        {
          name: 'H',
          items: [
            {
              name: 'HANGZHOU',
              value: 16,
            },
            {
              name: 'HETIANDIQU',
              value: 17,
            },
          ],
        },
        {
          name: 'Z',
          items: [
            {
              name: 'ZHENGZHOU',
              value: 18,
            },
            {
              name: 'ZHANGJIAKOU',
              value: 19,
            },
            {
              name: 'ZHANGJIAJIE',
              value: 20,
            },
            {
              name: 'ZHUHAI',
              value: 21,
            },
            {
              name: 'ZHONGSHAN',
              value: 22,
            },
            {
              name: 'ZIGONG',
              value: 23,
            },
            {
              name: 'ZIYANG',
              value: 24,
            },
            {
              name: 'ZHAOZHUANG',
              value: 25,
            },
            {
              name: 'ZHOUSHAN',
              value: 26,
            },
            {
              name: 'ZUNYI',
              value: 27,
            },
            {
              name: 'ZIBO',
              value: 28,
            },
            {
              name: 'ZHUZHOU',
              value: 29,
            },
            {
              name: 'ZHONGWEI',
              value: 30,
            },
          ],
        },
      ],
    };
  },

  methods: {
    onPullingDown() {
      // Mock async load.
      setTimeout(() => {
        // Update data.
        this.sourceData[1].items.push(...this.sourceData[1].items);
        // Call forceUpdate after finishing data load.
        this.$refs.indexList.forceUpdate();
      }, 1000);
    },
    onPullingUp() {
      // Mock async load.
      setTimeout(() => {
        const length = this.sourceData.length;
        if (length === this.sourceData.length) {
          // Update data.
          this.sourceData.push(this.sourceData[length]);
        }
        // Call forceUpdate after finishing data load.
        this.$refs.indexList.forceUpdate();
      }, 1000);
    },
    titleClick(title) {
      this.$hips.toast({ message: title });
    },
    select(item) {
      this.$hips.toast({ message: item });
    },
  },
};
</script>

<style lang="stylus">
.demo-index-list {
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: calc(100vh - 44px);
}
</style>
